﻿@model LoginViewModel
@{
	Layout = null;
}
<!DOCTYPE html>
<html lang="zh-CH">
<head>
	<meta charset="UTF-8">
	<title>@Resources.PayResult</title>
	@Scripts.Render("~/bundles/jquery")
	<script type="text/javascript" charset="utf-8" src="~/Scripts/jquery-easyui-1.4.5/jquery.easyui.min.js"></script>
	<style>
		* {
			margin: 0;
			padding: 0;
		}

		body {
			background: #F7F7F7;
		}

		.clear {
			clear: both;
		}

		.pay {
			width: 820px;
			height: 346px;
			background: url('../images/pay-bac.png') no-repeat center;
			margin: 0 auto;
			position: relative;
			left: -10px;
		}

		.pay .left {
			display: inline-block;
			float: left;
			width: 100px;
			margin-left: 80px;
			margin-top: 70px;
			text-align: center;
			font-size: 18px;
		}

		.pay .right {
			display: inline-block;
			float: left;
			width: 500px;
			margin-top: 75px;
			margin-left: 35px;
		}

		.pay .left img {
			width: 80px;
			height: 80px;
			margin-bottom: 8px;
		}

		.pay .right p {
			color: #9da1a4;
			font-size: 16px;
			display: block;
			margin-bottom: 20px;
		}

		.pay .right p:nth-of-type(2) span:first-child {
			margin-right: 30px;
		}

		.pay .right p:nth-of-type(3) {
			display: inline-block;
			float: left;
			margin-right: 30px;
		}

		.pay .right a.back {
			width: 90px;
			height: 25px;
			-webkit-border-radius: 2px;
			border-radius: 2px;
			background: #00a8f6;
			border: none;
			color: #fff;
			line-height: 25px;
			font-size: 14px;
			text-align: center;
			display: inline-block;
			text-decoration: none;
			float: left;
		}

		.pay .right a.back:hover {
			position: relative;
			top: 1px;
		}

		.pay p.relation {
			font-size: 14px;
			margin-top: 30px;
			display: inline-block;
			float: left;
			color: #9da1a4;
			letter-spacing: 1px;
			margin-left: 225px;
			position: relative;
		}

		.pay p.relation::before {
			content: "";
			width: 700px;
			height: 2px;
			background: #f3f5f5;
			position: absolute;
			top: -20px;
			left: -165px;
		}

		.pay .g {
			color: #37C982;
		}

		.pay .r {
			color: #FC6565;
		}

		.pay .o {
			color: #FF8700;
		}
	</style>
	<script>
		$(function () {
			countDown();
		});

		var num = 5;
		function countDown() {
			if (num >= 0) {
				$(".g").text(num);
				num--;
				setTimeout(countDown, 1000);
			} else {
				go();
			}
		}

		function go() {
			@if (!string.IsNullOrEmpty(Model.AccountName) && !string.IsNullOrEmpty(Model.Password))
			{
				<text>
				$("#hidUserName").val("@Model.AccountName");
				$("#hidPassword").val("@Model.Password");
				$("#hidValidateCode").val("@Model.ValidateCode");
				$("#frmLogin").submit();
				</text>
			} else {
				<text>
				window.location.href = "@Url.Action(nameof(HomeController.MainIndex), nameof(HomeController).GetControllerName())";
				</text>
			}
		}
	</script>
</head>
<body>
	@using (Html.BeginForm(nameof(AccountController.Login),
		nameof(AccountController).GetControllerName(),
		new { ReturnUrl = ViewBag.ReturnUrl },
		FormMethod.Post, new { id = "frmLogin" }))
	{
	@Html.AntiForgeryToken()
		<input type="hidden" id="hidUserName" name="AccountName" />
		<input type="hidden" id="hidPassword" name="Password" />
		<input type="hidden" id="hidValidateCode" name="ValidateCode" />
	}
	<div class="pay">
		<div class="left">
			<!-- <img src="/images/icon-pay-correct.png" alt="">-->
			<img src="~/images/icon-pay-error.png" alt="">
			<p class="r">@Resources.FailPay</p>
			<!-- g绿色 r红色 -->
		</div>
		<div class="right">
			<p>@Resources.FailPay！</p>
			<p>
				<span></span>
			</p>
			<p>
				<span class="g"></span>
				@Resources.GobackToMainIndex
			</p>
			<a href="#" class="back" onclick="go();">@Resources.GoBackNow</a>
			<div class="clear"></div>
		</div>
		<p class="relation"></p>
	</div>
</body>
</html>